<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/video-js.min.css" rel="stylesheet">
    <!-- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> -->
    <!-- <script src="https://unpkg.com/video.js/dist/video.js"></script> -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.danmu.js"></script>
    <script src="js/video.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .video-wrapper {
            position: relative;
        }

        .video-wrapper video {
            width: 100%;
        }

        .video-wrapper canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 563px;
        }


        .video-wrapper .tool-box {
            height: 38px;
        }

        .video-wrapper input,
        .video-wrapper button {
            height: 100%;
            margin-right: 15px;
            vertical-align: middle;
            outline: none;
            border: none;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .video-wrapper .danmu-input {
            width: 300px;
            border: 1px solid #ccc;
        }

        .video-wrapper .danmu-btn {
            color: #fff;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="container">
        <p style="font-size: xx-large;height: 48px" id="mediaTitle">&nbsp;</p>
        <div class="video-wrapper">
            <video class="video-js vjs-default-skin vjs-big-play-centered" id="myVideo" controls>
                <source id="source"
                    src="https://video.shenxuanche.com/transcode_sxc_57f97ad5-a29d-15a9-d6e3-97a4aec43eb1_720p.mp4">

            </video>
        </div>
        <div class="send_danmu_bar">
            弹幕&nbsp;&nbsp;
            <input type="checkbox" checked='checked' name="sex" id="ishide" value='is' onchange='changehide()'
                   class="chooseBtn"/>
            <label for="ishide" class="choose-label"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="textarea" id="text" max=300 style="border-radius:5px;width: 250px;color: black"/>&nbsp;&nbsp;
            <button type="button" class="btn btn-success" style="padding: 0 12px;background-color: #00a1d6"
                    onclick="send()">发送
            </button>
        </div>
    </div>
    <!--显示弹幕-->
<div id="danmu" class="flying" style="pointer-events:none;"></div>
    <script>
        var myVideo = videojs('myVideo', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            playbackRates: [0.5, 1, 1.5, 2, 3],
        })
        myVideo.play();
        //设置弹幕属性
        $("#danmu").danmu({
                left: $('.container').offset().left + 8,
                top: $('.container').offset().top + document.getElementById("mediaTitle").offsetHeight + 15,
                height: 500,//$("#my-player").height(),
                width: 950,
                zindex: 100,
                speed: 7500,
                opacity: 1,
                font_size_small: 16,
                font_size_big: 24,
                top_botton_danmu_time: 6000
            }
        );
        var myPlayer = this;
        //每次播放都会进入这个函数
        myPlayer.on("play", function () {
            // $("#danmu").height($("#my-player").height() - $(".vjs-control-bar").height());
            //设置弹幕出发的起始位置
            $("#danmu").height($('#media').offset().top + 500);
            $("#danmu").width(950);

            //从服务器获取弹幕信息
            if(isObtain){
                $.get("/webDanmu/danmu/find/" , function (data) {//这个data是json数据，由后端的 list集合(里面的元素是每条弹幕消息)转过来的json数据
                    $('#danmu').danmu("addDanmu", data);
                }, "json");
                isObtain = false;//保证只获取一次，不会应该视频的重新播放再次去获取数据，造成弹幕重复
            }
            //设置弹幕与视频同步
            var whereYouAt = myPlayer.currentTime();
            console.log(whereYouAt);
            $('#danmu').danmu("setTime", Math.floor(whereYouAt * 10));

            // $("#danmu").danmu("danmuStart");
            $('#danmu').danmu('danmuResume');
        });

        myPlayer.on("pause", function () {
            //暂停播放时，停止弹幕
            $('#danmu').danmu('danmuPause');
        });
        myPlayer.on("progress", function () {
            console.log("progress");
        })

 //发送弹幕
 function send() {
//        var color = document.getElementById('color').value;
//        var position = document.getElementById('position').value;
//        var size = document.getElementById('text_size').value;
        var text = document.getElementById('text').value;
        var time = $('#danmu').data("nowTime") + 1;
        var color = "red";
        var position = "0";
        var size = "1";
        if (text != "") {

            $('#danmu').danmu("addDanmu",
                {text: text, color: color, size: size, position: position, time: time, isnew: ""});
            //将弹幕消息发送到后端，存到数据库中
            $.post("/webDanmu/danmu/send/", {
                text: text,
                color: 'while',
                size: size,
                position: position,
                time: time
            }, function (data) {

            }, "json");

        }
        document.getElementById('text').value = '';
    }

    function changehide() {
    // 通过透明度控制是否显示弹幕
        if (document.getElementById("ishide").checked) {
            jQuery('#danmu').data("opacity", 1);
            jQuery(".flying").css({
                "opacity": 1
            });
        } else {
            jQuery('#danmu').data("opacity", 0);
            jQuery(".flying").css({
                "opacity": 0
            });
        }
    }

    function settime() {
        var t = document.getElementById("set_time").value;
        t = parseInt(t);
        console.log(t);
        $('#danmu').data("nowtime", t);
    }

        $(function() {
            var videoPanelMenu = $(".vjs-fullscreen-control");
            videoPanelMenu.before(`<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">
		<div class="vjs-menu" role="presentation">
		<ul class="vjs-menu-content" role="menu">
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(1)">普通</li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(2)">标清 </li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(3)">高清 </li>
		</ul></div>
		<button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">
				<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>
			</button>
		</div>`);

            var obj = {
                tag: false,
                ctime: 0
            };
            window.obj = obj;
            var myPlayer = videojs.getPlayers()['myVideo'];
            myPlayer.on("timeupdate", function() {

                if (window.obj.tag) {
                    videojs("myVideo").currentTime(window.obj.ctime)
                    videojs("myVideo").play();
                    window.obj.tag = false;
                }

                //视频打点
                // var ctime_=videojs("my_video_1").currentTime().currentTime();
                // if(ctime_==60){
                // 	videojs("my_video_1").currentTime(ctime_+1);
                // }


            });
        })
        // 切换清晰度
        function changeVideo(type){
            if(type==1){
		videojs("myVideo").src("https://video.shenxuanche.com/transcode_sxc_57f97ad5-a29d-15a9-d6e3-97a4aec43eb1_720p.mp4");
		videojs("myVideo").play();


	  }
 	  if(type==2){
		videojs("myVideo").src("https://video.shenxuanche.com/transcode_sxc_0ab87870-f4b6-e0c9-9f8c-f8c4e79268b1_720p.mp4");	
		videojs("myVideo").play();

	  }
	  if(type==3){
		videojs("myVideo").src("https://video.shenxuanche.com/transcode_sxc_afdb73e1-10b2-3e44-d553-ff9e3a78db6b_720p.mp4");	
		videojs("myVideo").play();
	  }
	  window.obj.tag=true;
        }
    </script>
</body>

</html>